import { useEffect, useState } from "react";

export default function Closure() {
	/* 
    问题：
    - 在原本代码中，useEffect 里的 setInterval 回调函数始终引用的是 初始的 count 值，而不会使用更新后的 count。
    - 这是因为 JavaScript 闭包的特性，导致 setInterval 中的回调函数捕获了 count 在首次渲染时的值，而不是在每次重新渲染时获取更新后的 count。
    - useEffect 的依赖数组是空数组 []，这意味着 useEffect 只在组件首次渲染时执行一次。
    - setInterval 内部的逻辑仍然使用的是最初的 count 值。
    */
	const [count, setCount] = useState(0);

	// useEffect(() => {
	// 	setInterval(() => {
	// 		console.log(count);
	// 		setCount(count + 1);
	// 	}, 1000);
	// }, []);


	// 解决方案1 ( 推荐 使用函数式更新，因为它更高效，不会在每次 count 更新时重新注册定时器，并且避免了不必要的副作用触发。)
    /* 
    - 使用函数式更新 setCount 
    - React 的 setState 函数允许传递一个函数来获取最新的状态值。通过这种方式，可以避免闭包问题，因为它总是基于当前的 count 进行更新。
    */
	// useEffect(() => {
	// 	setInterval(() => {
	// 		setCount((prevCount) => prevCount + 1); // 使用函数式更新
	// 	}, 2000);
	// }, []);


    // 解决方案2 
    /* 
    可以把 count 作为 useEffect 的依赖项，以确保每次 count 变化时，useEffect 都会重新执行，从而使 setInterval 使用最新的 count 值。
    */
    useEffect(() => {
        const interval = setInterval(() => {
            console.log(count);
            setCount(count + 1);
        }, 1000);

        return () => clearInterval(interval);  // 清理定时器
    }, [count]);  // 添加 count 作为依赖项

	return (
		<div>
			<h2>6. 闭包问题和解决</h2>
			<div>{count}</div>
		</div>
	);
}
